<template>
    <div class="child-info-wrapper">
      <top-bar :title="topTitle"></top-bar>

      <div class="list-wrapper">
        <div class="group" v-for="(item,index) in  userList" :key="index">
          <div class="child-top">
            <a v-if="item.babyPhoto">
              <img :src="item|filterSrc" class="portrait">
            </a>
            <a v-else>
              <img src="../../../static/images/babyBoy.png" class="portrait" v-if="item.sex=='男' || item.sex==0">
              <img src="../../../static/images/babyGirl.png" class="portrait" v-else>
            </a>
            <div class="name-box">
              <h4>{{item.name}}<img src="../../../static/images/home/boy.png" class="boy-tag" v-if="item.sex=='男'"></h4>
              <p class="serial-number">接种本编号：25412562532121</p>
            </div>
            <a class="edit-btn" @click="edit(item)">编辑</a>
          </div>
          <div class="date-time"><span>出生日期：</span>{{item.birthday}}</div>
          <div class="adress">
            <span>所在地址：</span>
            <div>{{item.nowDetail}}</div>
          </div>
          <div class="pics-box">
            <!--<span>照片：</span>-->
           <!-- <div class="pics-con">
              <img src="../../../static/images/login/registered.png">
              <img src="../../../static/images/login/registered.png">
              <img src="../../../static/images/login/registered.png">
            </div>-->
          </div>
        </div>

      </div>

      <div style="height: 100px;"></div>
      <div class="home-footer">
        <div class="home-bar" @click="homeClick">
          <img src="../../../static/images/home/footer-home.png">
          <p>首页</p>
        </div>
        <div class="appoint-bar" @click="goAppoint">
          <img src="../../../static/images/home/footer-appoint.png">
          <p>接种预约</p>
        </div>
        <div class="mine-bar active">
          <img src="../../../static/images/home/footer-mine-select.png">
          <p>我的</p>
        </div>
      </div>

    </div>
</template>

<script>
  import TopBar from '@/components/top';
  import url from '../../../config/app.config'

    export default {
        name: "child-info",
        metaInfo () {
          return {
            title: '儿童信息'
          }
        },
      data(){
        return{
          topTitle:'儿童信息',
          userId:sessionStorage.getItem('userId'),
          userList:[]
        }
      },
      mounted(){
        this.getData();
      },
      filters:{
        filterSrc(val){
          let p=url.http_url+'/'+val.babyPhoto;
          return p
        }
      },
      methods:{
        getData(){
          this.$api.get('/userHandle/findAllChildren/'+this.userId).then( (res)=> {
            if(res.data.result==0){
              this.userList=res.data.obj;
            }
          })
        },
        homeClick(){
          this.$router.push({path: '/index'})
        },
        edit(val){
          this.$router.push({path: '/add',query:{id:val.id}})
        },
        goAppoint(){
          this.$router.push({path: '/appointment'})
        }
      },
      components: {
        TopBar
      }
    }
</script>

<style lang="scss">
  .child-info-wrapper{
    .list-wrapper{
      padding:10px 15px;
      .group{
        background:rgba(255,255,255,1);
        box-shadow:0px 0px 24px 2px rgba(50,51,51,0.06);
        border-radius:10px;
        padding:15px;
        margin-bottom: 10px;
        .child-top{
          .portrait{
            width:60px;
            height:60px;
            border-radius:50%;
            vertical-align: middle;
          }
          .name-box{
            display: inline-block;
            vertical-align: middle;
            margin-left:6px;
            h4{
              font-size:18px;
              font-family:PingFang-SC-Bold;
              color:rgba(38,38,38,1);
              margin-bottom: 10px;
              img{
                width:15px;
                height: 14px;
                vertical-align: middle;
                margin-left: 6px;
              }
            }
            .serial-number{
              font-size:12px;
              font-family:PingFang-SC-Regular;
              color:rgba(38,38,38,1);
            }
          }
          .edit-btn{
            float: right;
            display: inline-block;
            width:44px;
            height:22px;
            line-height: 22px;
            text-align: center;
            background:rgba(245,99,99,1);
            border-radius:10px;
            font-size:12px;
            font-family:PingFang-SC-Regular;
            color:rgba(255,255,255,1);
            margin-top: 14px;
          }
        }
        .date-time,.adress,.pics-box{
          font-size:15px;
          font-family:PingFang-SC-Regular;
          color:#262626;
          span{
            color:#7A7A7A;
            display: inline-block;
            width:80px;
          }
        }
        .adress{
          margin:15px 0;
          display: flex;
          span{
            flex: 0 0 80px;
          }
        }
        .date-time{
          margin-top: 20px;
        }
        .pics-box{
          display:flex ;
          span{
            flex: 0 0 80px;
            text-align: right;
            margin-right: 6px;
          }
          .pics-con{
            img{
              width:70px;
              height:70px;
              border-radius:2px;
            }
          }
        }
      }
    }
    .home-footer{
      position: fixed;
      bottom: 0;
      width:100%;
      box-shadow:0px -3px 10px 0px rgba(50,51,51,0.08);
      display: flex;
      text-align: center;
      padding:10px 0;
      background:rgba(255,255,255,1);
      p{
        margin-top:4px;
        font-size:10px;
        color:rgba(122,122,122,1);
      }
      .active{
        p{
          color:rgba(218,74,74,1);
        }
      }
      .home-bar{
        flex:1;
        img{
          width:23px;
          height: 20px;
        }
      }
      .appoint-bar{
        flex:1;
        img{
          width:23px;
          height: 20px;
        }
      }
      .mine-bar{
        flex:1;
        img{
          width:20px;
          height: 20px;
        }
      }
    }
  }
</style>
